<style lang="scss" scoped>
  .coupons {
      margin-top: 3.5rem;
      background-color: #fff;
      border-radius: 8px;
      padding: 1.5rem 1rem 1rem;
      box-sizing: border-box;
      position: relative;

      .title {
        width: 12rem;
        height: 3rem;
        background: var(--btn_color);
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        line-height: 3rem;
        text-align: center;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, -50%);
        letter-spacing: 0.3rem;
        font-size: 1.4rem;
        span {
          display: inline-block;
          width: 1rem;
          height: 1rem;
          border-radius: 1rem;
          background-color: #ffdb89;
        }
        span:nth-child(1) {
          margin-right: 0.5rem;
        }
        span:nth-child(2) {
          margin-left: 0.2rem;
        }
        .triangle_left_border {
          width: 0;
          height: 0;
          border-bottom: 1.5rem solid var(--btn_color);
          border-left: 1.5rem solid transparent;
          position: absolute;
          left: 0%;
          top: 0%;
          margin-left: -1.5rem;
        }
        .triangle_right_border {
          width: 0;
          height: 0;
          border-bottom: 1.5rem solid var(--btn_color);
          border-right: 1.5rem solid transparent;
          position: absolute;
          left: 100%;
          top: 0%;
        }
      }

      // 礼包详情
      .activity1 {
        box-sizing: border-box;
        width: 100%;
        margin-top: 1rem;
        background-color: #fff;
        border-radius: 10px;
      }
  }
</style>
<template>
  <div class="coupons" :style="{ '--btn_color': btn_color }">
        <div class="title">
          <span></span>
          <div>活动内容</div>
          <span></span>
          <div class="triangle_left_border"></div>
          <div class="triangle_right_border"></div>
        </div>

        <div class="activity1">
          <!-- <div style="margin-bottom: 10px">
            <div style="font-size: 15px">活动时间</div>
            <div style="margin-top: 10px">
              {{ activityItem.start_time }} 至 {{ activityItem.end_time }}
            </div>
          </div> -->
          <!-- <div style="margin-bottom: 10px; font-size: 15px">活动介绍</div> -->
          <div v-for="item in introduce" :key="item.id">
            <van-image
              v-if="item.type == 'img'"
              width="200"
              height="200"
              :src="item.value"
            />
            <div
              style="margin-bottom: 10px"
              class="margT-m line-height-l fs-12"
              v-if="item.type == 'text'"
              v-html="item.value"
            ></div>
          </div>
        </div>
      </div>
</template> 
<script>
import { Tab, Tabs, List, Loading } from 'vant';
// import CaseList from "@/components/CaseList.vue";
export default {
  name: "ActiveContent",
  components: {
    [List.name]: List,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Loading.name]: Loading
  },
  props: {
    activityItem: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      btn_color: "",
      height: null,
      introduce: []
    }
  },
  watch: {
    activityItem: {
      handler(val){
        this.introduce = val.introduce
      },
      immediate:true,
      deep:true
    }
  },
  created () {
    const _this = this;
    this.btn_color = this.activityItem.btn_color;
    this.introduce = this.activityItem.introduce;
    console.log(this.introduce, 'this.introduce----------------------');
  },
  mounted() {
  },
  methods: {
    
   
  }
};
</script>
